@charset "UTF-8";
/***************************************************************************************************
 Default
***************************************************************************************************/
html, body, div, form {
	margin: 0;
	padding: 0; 
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}
body {
	background-image:url(./bg_body.png);
	color: #886644;
	font-size: 9pt;
	line-height: 1.7;
}



a {
	color: #D93A3A;
	text-decoration: underline;
}
a:visited  {
	color: #D93A3A;
	text-decoration: underline;
}
a:hover {
	color: #EB7A7A;
	text-decoration: underline;
}
a:active {
	color: #FF4444;
	text-decoration: underline;
}
::selection {
	background: #F4F0ED;
	color: #886644;
}
::-moz-selection {
	background: #F4F0ED;
	color: #886644;
}
h1 {
	margin: 0;
	padding: 0.5em 0;
	font-size: 12pt;
}
h2 {
	font-size: 9pt;
}
h3 {
	font-size: 12pt;
}
h4 {
    color: #fae495;
       margin: 0;
       padding-left: 0.5em;
}
table {
	margin: 1em 0;
	font-size: 8pt;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}
th {
	padding: 0.2em 0.5em;
	border: 1px solid #C3B2A1;
	background-color: #F4F0ED;
	background-color: rgba(195, 178, 161, 0.05);
	text-align: center;
}
td {
	padding: 0 0.5em;
	border: 1px solid #C3B2A1;
}
img {
	max-width: 100%;
	height: auto;
	margin: 5px 0;
	border: 0;
	border-radius: 10px;
}
audio,
video {
	max-width: 100%;
	height: auto;
}
p {
	margin: 1em 0 1.7em 0;
	padding: 0;
}
blockquote {
	position: relative;
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #C3B2A1;
	border-radius: 10px;
	background-color: #F4F0ED;
	background-color: rgba(195, 178, 161, 0.05);
}
hr {
	height: 10px;
	margin: 1em 0;
	border: 0;
	background: url(./line.png) repeat-x 0 50%;
}
ul,
ol {
	margin: 1em 0 1em 1em;
	padding: 0;
}
li {
	margin: 0 0 0 1em;
	padding: 0;
}
del {
	opacity: 0.5;
}
em {
	color: #33aa33;
	font-style: italic;
	font-weight: normal;
}
strong {
	color: #ff3333;
	font-weight: bold;
}
strong > strong {
	border-bottom: 1px solid #ff3333;
}
strong > strong > strong {
	border-bottom: 3px double #ff3333;
}
mark {
	border-radius: 5px;
	background: #ffaaaa;
	background: rgba(255, 0, 0, 0.3);
}
sup,
sub {
	font-size: 70%;
}
small {
	font-size: 70%;
}
dl {
	margin: 1em 0;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 2em;
}



/***************************************************************************************************
 Layout
***************************************************************************************************/
.container {
	float: right;
	width: 80%;
	margin-left: -16em;
}
.sidebar {
	width: 18em;
 float: left;
 padding-left: 16em
}
.contents {
	position: relative;
  float: right;
  padding-right: 5em;
	box-sizing: border-box;
}
nav {
	clear: both;
	padding: 1em 0 2em 0;
	text-align: left;
}
footer {
    background-image: url(./bg-footer.png), url(./bg-footer-w.png);
    background-repeat: repeat-x, repeat;
    background-position: bottom left, top left;
    content: "";
    display: block;
    height: 100px;
}
.noside .container {
	width: 100%;
	margin-right: 0;
}
.noside .contents {
	position: static;
	width: 42em;
	margin: auto;
}



/***************************************************************************************************
 Decoration
***************************************************************************************************/
/* ヘッダーの日記の名前 */
header {
    background: url(./bg-header.png) repeat-x left top;
    word-wrap: break-word;
}

header .diary-name {
	color: #886644;
	text-align: center;
	padding-top:50px;
}
header .diary-name a {
	color: #886644;
	text-decoration: none;
}

/* 日記 */
.contents article {
  width:780px;
	position: relative;
	padding: 1em;
	border: 3px double #C3B2A1;
	border-radius: 5px;
	overflow: hidden;
	background-color: #ffffff;
}
.contents article > h2 {
	position: absolute;
	top: 10px;
	left: -210px;
	z-index: 1;
	transform: rotate(-30deg);
	width: 300px;
	height: auto;
	padding: 5px 100px;
	border: 1px solid #C4B3A2;
	background: #F4F0ED;
	background: url(./bg_header.png);
	font-weight: normal;
	text-align: center;
	letter-spacing: 0.1em;
}
.diary-title-week,
.diary-title-week-sunday,
.diary-title-week-saturday,
.diary-title-holiday {
	display: none;
	opacity: 0.5;
	font-weight: normal;
	font-size: 8pt;
	vertical-align: middle;
}
.diary {
	margin: 4em 1em 0 1em;
	padding: 0;
	text-align: justify;
	word-wrap: break-word;
}
.diary h3 {
	margin: 0 0 0.5em 0;
	padding: 0.2em 0.2em 0.4em 32px;
	background: url(./1.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;
	color: #886644;
	font-weight: normal;
}
h3:nth-of-type(2) {		background: url(./2.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(3) {		background: url(./3.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(4) {		background: url(./4.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(5) {		background: url(./5.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(6) {		background: url(./6.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(7) {		background: url(./7.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(8) {		background: url(./8.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(9) {		background: url(./9.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;		}
h3:nth-of-type(10) {	background: url(./10.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(11) {	background: url(./11.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(12) {	background: url(./12.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(13) {	background: url(./13.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(14) {	background: url(./14.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(15) {	background: url(./15.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(16) {	background: url(./16.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(17) {	background: url(./17.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(18) {	background: url(./18.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(19) {	background: url(./19.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(20) {	background: url(./20.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(21) {	background: url(./21.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(22) {	background: url(./22.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(23) {	background: url(./23.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(24) {	background: url(./24.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}
h3:nth-of-type(25) {	background: url(./25.png) no-repeat 0 30%, url(./line.png) repeat-x left bottom;	}

/* サイドバー */
.sidebar .caption-side {
 
	background-color: #603c21;
    border-radius: 8px 8px 0 0;
}
.sidebar section {
	margin-bottom: 3em;
}
.sidebar section ul {
	margin: 0 0 1em 0;
}
.sidebar section li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* サイドバーの「カレンダー」 */
.calendar {
	margin: 0 0 1em 0;
	padding: 1em 0;
	text-align: center;
	
		background: url(./bg-widget-b.png) repeat-x left top;
    content: "";
    display: block;
  border: solid 1px #895628; 
  border-radius:  0 0 8px 8px;
}
.calendar .date {
	text-align: center;
}
.calendar table {
	margin: auto;
	border-collapse: separate;
	border-spacing: 3px 4px;
	empty-cells: show;
}
.calendar th {
	padding: 0.1em 0.4em;
	border-width: 0;
	background-color: transparent;
	font-weight: normal;
	text-align: center;
}
.calendar td {
	width: 20px;
	padding: 1px;
	border-width: 0;
	border-radius: 10px;
	box-sizing: border-box;
	line-height: 1.5;
	text-align: center;
}
.calendar a {
	display: inline-block;
	width: 20px;
	text-align: center;
	text-decoration: none;
}
.calendar .week {
}
.calendar .wrote {
	border-bottom: 2px solid #C4B3A2;
	background-color: #F4F0ED;
}
.calendar .wrote a {
	color: #886644;
}
.calendar .wrote:hover {
	opacity: 0.5;
}
.calendar .sunday {
	color: #f88080;
}
.calendar .wrote-sunday {
	border-bottom: 2px solid #FF7373;
	background-color: #FFEDED;
}
.calendar .wrote-sunday a {
	color: #f88080;
}
.calendar .wrote-sunday:hover {
	opacity: 0.5;
}
.calendar .saturday {
	color: #8080f0;
}
.calendar .wrote-saturday {
	border-bottom: 2px solid #bbbbf8;
	background-color: #F8F8FD;
}
.calendar .wrote-saturday a {
	color: #8080f0;
}
.calendar .wrote-saturday:hover {
	opacity: 0.5;
}

/* サイドバーの「アーカイブ」 */
.archive {
	padding-left: 1em;
	padding-top: 1em;
		background: url(./bg-widget-b.png) repeat-x left top;
    content: "";
    display: block;
  border: solid 1px #895628; 
  border-radius:  0 0 8px 8px;
}
.archive .count {
	opacity: 0.5;
	padding-left: 0.5em;
}

/* ナビゲーション */
.nav-yearly {
	clear: both;
	margin: 0.3em 0;
	font-size: 8pt;
	text-align: center;
}
.nav-yearly > a,
.nav-yearly > span {
	display: inline-block;
	width: 3em;
	border: 1px solid #ffffff;
	border-radius: 12px;
	box-sizing: border-box;
	background-color: #ffffff;
	text-align: center;
	text-decoration: none;
}
.nav-yearly > .title {
	width: 5em;
}
.nav-yearly > a {
	border: 1px solid #FF7373;
	border-radius: 12px;
	background-color: #FFEDED;
}
.nav-yearly > a:hover {
}
.nav-yearly > .disabled {
	opacity: 0.5;
}
.nav-yearly > .current {
	border: 1px solid #FF7373;
	border-radius: 12px;
	background-color: #FF7373;
	color: #ffffff;
}

/* フッターの著作権表示 */
.copyright {
	margin: 0;
	padding: 1em;
	text-align: right;
}

/* 目次ページ */
.index {
  width:780px;
	margin:0 auto;
	margin-bottom: 2em;
	padding: 2em 1em;
	border: 3px double #C3B2A1;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #ffffff;
}
.caption-year {
	margin: 0 0 0.5em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	border-width: 0;
	background: url(./line.png) repeat-x left bottom;
	color: #886644;
	font-weight: bold;
	font-size: 12pt;
}
.caption-year a {
	text-decoration: none;
}
.caption-month {
	margin: 0;
	padding: 0;
	border-width: 0;
	color: #0080c0;
	font-weight: bold;
	font-size: 9pt;
}
h3.caption-month {
	background-color: transparent;
	background-image: none;
}
.caption-month a {
	text-decoration: none;
}
.index .indent {
	margin-left: 2em;
}
.index .topic {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 印刷時の改ページ */
.pagebreak {
	page-break-before: always;
}



/***************************************************************************************************
 Media Queries
***************************************************************************************************/
@media screen and (max-width: 740px) {
	body {
		width: 100%;
	}
	.container {
		width: 100%;
	}
	.contents {
		width: 42em;
		margin: auto;
		padding: 0;
	}
	.sidebar {
		display: none;
	}
	.nav-yearly > a,
	.nav-yearly > span {
		display: inline;
		padding: 0 0.5em;
		box-sizing: border-box;
		text-align: left;
		text-decoration: none;
	}
	footer {
		margin: auto;
		width: 42em;
	}
	.index {
		width: 42em;
		margin: auto;
		padding: 1em 1em 4em;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 540px) {
	.container {
		width: 100%;
		margin: 0;
	}
	.noside .container {
		width: 100%;
		margin: 0;
	}
	.contents {
		width: 95%;
		margin: auto;
		padding: 0;
	}
	.noside .contents {
		position: static;
		width: 95%;
		margin: auto;
	}
	footer {
		width: 100%;
		margin: auto;
	}
	.sidebar {
		display: none;
	}
	.index {
		width: 95%;
		margin: auto;
	}
	.index .indent {
		margin-left: 1em;
	}
}
@media print {
	body {
		width: 100%;
	}
	.container {
		width: 100%;
	}
	.contents {
		width: 42em;
		margin: 0 1em;
		padding: 0 0 4em;
		box-sizing: border-box;
	}
	.sidebar,
	nav,
	footer {
		display: none;
	}
}

